<!DOCTYPE html>
<html lang="zh">
<head>
    <:include file="../../common/css.html" title="按钮组件"/>
</head>
<body class="pear-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    开发环境
                </div>
                <div class="layui-card-body">
                    Pear Button 参考 Element UI 样式 ，提供 Button 服务
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="/assets/component/pear/css/pear.css" />
或
<link rel="stylesheet" href="/assets/component/pear/css/module/button.css" />
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    简单使用
                </div>
                <div class="layui-card-body">
                    <button class="pear-btn">Default Button</button>&nbsp;&nbsp;
                    <button class="pear-btn pear-btn-primary">Primary Button</button>&nbsp;&nbsp;
                    <br>
                    <br>
                    <button class="pear-btn pear-btn-primary"> Button-Primary</button>&nbsp;&nbsp;
                    <button class="pear-btn pear-btn-success"> Button-Success</button>&nbsp;&nbsp;
                    <button class="pear-btn pear-btn-danger"> Button-danger</button>&nbsp;&nbsp;
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<button class="pear-btn"> Default Button </button>
<button class="pear-btn" dashed> Dashed Button </button>
<button class="pear-btn pear-btn-primary"> Primary Button </button>
<button class="pear-btn pear-btn-primary"> Button-Primary </button>
<button class="pear-btn pear-btn-success"> Button-Success </button>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    简约样式
                </div>
                <div class="layui-card-body">
                    <button plain class="pear-btn pear-btn-primary"> Button-Primary</button>&nbsp;&nbsp;
                    <button plain class="pear-btn pear-btn-success"> Button-Success</button>&nbsp;&nbsp;
                    <button plain class="pear-btn pear-btn-danger"> Button-Danger</button>&nbsp;&nbsp;
                    <button plain class="pear-btn pear-btn-warming"> Button-Warming</button>&nbsp;&nbsp;
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<button class="pear-btn"> Default Button </button>
<button class="pear-btn" dashed> Dashed Button </button>
<button class="pear-btn pear-btn-primary"> Primary Button </button>
<button class="pear-btn pear-btn-primary"> Button-Primary </button>
<button class="pear-btn pear-btn-success"> Button-Success </button>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    按钮大小
                </div>
                <div class="layui-card-body">
                    <button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg</button>&nbsp;&nbsp;
                    <button class="pear-btn pear-btn-primary"> Button-Default</button>&nbsp;&nbsp;
                    <button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm</button>&nbsp;&nbsp;
                    <button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs</button>&nbsp;&nbsp;
                    <br>
                    <br>
                    <button class="pear-btn pear-btn-warming pear-btn-lg"> Button-Lg</button>&nbsp;&nbsp;
                    <button class="pear-btn pear-btn-warming"> Button-Default</button>&nbsp;&nbsp;
                    <button class="pear-btn pear-btn-warming pear-btn-sm"> Button-Sm</button>&nbsp;&nbsp;
                    <button class="pear-btn pear-btn-warming pear-btn-xs"> Button-Xs</button>&nbsp;&nbsp;
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg </button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-primary"> Button-Default </button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm </button>&nbsp;&nbsp;
<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs </button>&nbsp;&nbsp;
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    按钮组
                </div>
                <div class="layui-card-body">
                    <div class="pear-btn-group">
                        <button class="pear-btn pear-btn-primary" round> Button-One</button>
                        <button class="pear-btn pear-btn-primary" round> Button-Two</button>
                        <button class="pear-btn pear-btn-primary" round> Button-Three</button>
                    </div>
                    <br>
                    <br>
                    <div class="pear-btn-group">
                        <button class="pear-btn"> Button-One </button>
                        <button class="pear-btn"> Button-Two </button>
                        <button class="pear-btn"> Button-Three </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<div class="pear-btn-group">
    <button class="pear-btn"> Button-One </button>
    <button class="pear-btn"> Button-Two </button>
    <button class="pear-btn"> Button-Three </button>
</div>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    Load 自动
                </div>
                <div class="layui-card-body">
                    <button class="pear-btn pear-btn-primary" load> 加载 600 ms </button>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
layui.use(["button"], function() {
    var button = layui.button;

    button.load({
        elem:'[load]',
        time: 600,
        done: function(){
            popup.success("加载完成");
        }
    });
});
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    Load 手动
                </div>
                <div class="layui-card-body">

                    <button class="pear-btn pear-btn-primary" loading> 开始 </button>

                    <button class="pear-btn pear-btn-danger" stop> 停止 </button>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
layui.use(["button"], function() {
    var button = layui.button;

    var dom = button.load({
        elem:'[load]',
    })

    dom.stop(function() {
        popup.failure("已停止");
    });
});
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    本页跳转
                </div>
                <div class="layui-card-body">
                    <button class="pear-btn pear-btn-primary" to> 本页跳转 </button>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
layui.use(["jquery"], function() {
    var $ = layui.jquery;

    $("[to]").click(function(){
        top.layui.frame.changePageByElement("content","http://www.baidu.com","百度一下",true)
    })
});
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 依 赖 脚 本 -->
    <:include file="../../common/js.html" />
    <script>
        layui.use(['element', 'code', 'jquery', "button", "popup"], function() {
            var element = layui.element;
            var $ = layui.jquery;
            var popup = layui.popup;
            var button = layui.button;

            layui.code({ encode: true  });

            $("[load]").click(function() {
                button.load({
                    elem: '[load]',
                    time: 600,
                    done: function() {
                        popup.success("加载完成");
                    }
                })
            })

            var dom;

            $("[loading]").click(function() {
                dom = button.load({
                    elem: '[loading]'
                })
            })

            $("[stop]").click(function() {
                dom.stop(function() {
                    popup.failure("已停止");
                });
            })

            $("[to]").click(function(){
                top.layui.admin.jump(14,"百度一下","http://www.bing.com",true)
            })
        })
    </script>
</body>
</html>
